<template>
  <div>
    <group>
      <popup-radio title="厂站选择" v-model="state" :options="options">
        <popup-header slot="popup-header" title="请选择"></popup-header>
      </popup-radio>
    </group>
    <button-tab>
      <button-tab-item selected @on-item-click="search('1')">遥测</button-tab-item>
      <button-tab-item @on-item-click="search('2')">遥信</button-tab-item>
    </button-tab>
    <search v-model.trim="msg" :auto-fixed="false"></search>
    <table cellspacing="0">
      <thead>
      <tr>
        <th>序号</th>
        <th>时间</th>
        <th>描述</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, key) in array" :key="key">
        <td>{{key + 1}}</td>
        <td>{{item[0]}}</td>
        <td v-html="item[1]"></td>
      </tr>
      </tbody>
    </table>
    <div v-show="list.length===0" class="tip">改厂站暂无遥测 请选择其他厂站</div>
  </div>
</template>

<script>
export default {
  name: 'RealData',
  data () {
    return {
      options: [],
      list: [],
      state: '',
      msg: '',
      type: '1'
    }
  },
  methods: {
    search (type) {
      this.type = type
      this.newProjectDwr.getDataNameList(this.state, type, res1 => {
        if (res1 === null || !res1.length) {
          this.list = []
          return
        }
        this.newProjectDwr.getDataValueList(this.state, type, res => {
          if (type === '2') {
            res.forEach((item, index) => {
              if (item === 0) {
                res[index] = '分闸'
              } else {
                res[index] = '<span class="red">' + '合闸' + '</span>'
              }
            })
          }
          var list = []
          res1.forEach((item, index) => {
            list.push([item, res[index]])
          })
          this.list = list
        })
      })
    },
    init () {
      this.newProjectDwr.getSubstationList(res => {
        var list = res.split(',')
        const id = localStorage.scadaId
        const len = list.length
        var obj = []
        for (var i = 0; i < len; i = i + 2) {
          if (id.includes(list[i])) {
            if (!this.state) {
              this.state = list[i]
            }
            obj.push({ key: list[i], value: list[i + 1] })
          }
        }
        this.options = obj
        this.search('1')
      })
    }
  },
  created () {
    this.init()
  },
  watch: {
    state () {
      this.search(this.type)
    }
  },
  computed: {
    array () {
      return this.list.filter(item => item[0].includes(this.msg))
    }
  }
}
</script>

<style scoped>
.input{
  -webkit-appearance: none;
  outline: 0;
}
</style>
